import { PageProps } from "@/interfaces/app.interface"
import React, { useEffect, useCallback, useState, useRef, MouseEvent, useMemo } from "react"
import style from "./index.less"
import Head from '../components/head'
import { getSolus, getSolu, getPro } from '@/api'
import { prefix } from '@/utils/constant'
const texts = ['产品概述', '技术参数', '尺寸图', '订货型号', '产品视频', '文档下载']

const detailPage = () => {

    let [mask, setMask] = useState(false)
    let [list, setList] = useState([])
    let [index, setIndex] = useState(0)
    let [items, setItems] = useState([])
    let [step, setStep] = useState(0)
    let [sub, setSub] = useState(0)
    let [tindex, setTindex] = useState(0)
    let [pro, setPro] = useState<obj>({})
    let [sindex, setSindex] = useState(0)
    let [url, setUrl] = useState('')
    let [text, setText] = useState([])
    const tab = (index: number) => () => {
        tabs(index)()

        setMask(true)
    }

    const tabs = (index: number) => () => {
        setStep(0)
        setIndex(index)
        getSolu({ industryId: index }).then(res => {
            console.log(res)
            setItems(res)
        })
    }

    const detail = (index: number) => () => {
        setStep(1)
        setSub(index)
    }

    const change = (id: number) => () => {
        setTindex(0)
        getPro({ id }).then(res => {
        //   let txt = [ '尺寸图', '订货型号', '产品视频', '文档下载']
        //     if (res.detailMaps) {
        //         res.detailMaps.unshift({ url: res.image })
        //     } else {
        //         res.detailMaps = [{ url: res.image }]
        //     }
        //     if (res.content) {
        //         txt.push('产品概述')
        //     }
        //     if (res.paramter) {
        //         txt.push('技术参数')
        //     }
        //     if (res.dimensionalDrawing)
            setPro(res)
            setStep(2)
        })
    }

    const showVideo = (url: string) => () => {
        setUrl(prefix + url)
        setStep(3)
    }

    const cls = () => {
        if (step == 3) {
            setStep(2)
        } else {
            setMask(false)
        }
    }

    useEffect(() => {
        getSolus({ pid: 7 }).then(res => {
            setList(res)
        })
    }, [])

    return <>

        <div className={style.hall}>
            <div className={`${style.img} ${style.h1}`} onClick={tab(120)}>
                <img src={require('@/assets/img/hall/h1.png')} />
                <div className={style.tip}>综合</div>
            </div>
            <div className={`${style.img} ${style.h2}`} onClick={tab(131)}>
                <img src={require('@/assets/img/hall/h2.png')} />
                <div className={style.tip}>文旅卫生</div>
            </div>
            <div className={`${style.img} ${style.h3}`} onClick={tab(132)}>
                <img src={require('@/assets/img/hall/h3.png')} />
                <div className={style.tip}>地产</div>
            </div>
            <div className={`${style.img} ${style.h4}`} onClick={tab(133)}>
                <img src={require('@/assets/img/hall/h4.png')} />
                <div className={style.tip}>农林牧渔</div>
            </div>
            <div className={`${style.img} ${style.h5}`} onClick={tab(134)}>
                <img src={require('@/assets/img/hall/h5.png')} />
                <div className={style.tip}>教育</div>
            </div>
            <div className={`${style.img} ${style.h6}`} onClick={tab(135)}>
                <img src={require('@/assets/img/hall/h6.png')} />
                <div className={style.tip}>企业园区</div>
            </div>
            <div className={`${style.img} ${style.h7}`} onClick={tab(136)}>
                <img src={require('@/assets/img/hall/h7.png')} />
                <div className={style.tip}>零售</div>
            </div>

        </div>


        {
            mask ?
                <div className="mask">
                    <div className={style.cls} onClick={cls}>&times;</div>
                    {
                        step == 3 ? <div className={`flex-center ${style.vid}`}>
                            <video src={url} controls autoPlay></video>
                        </div> :
                            step == 2 ?
                                <div className={style.dialog}>
                                    {
                                        pro?.id ? <>
                                            <div className={`flex ${style.top}`}>
                                                <div>
                                                    <span className={style.gray}>
                                                        <span>{list.find(item => item.id == index).title}</span>
                                            &gt;
                                            </span>
                                                    <span>产品详情</span>
                                                </div>
                                                <div className={`flex ${style.back}`} onClick={() => setStep(1)}>
                                                    <img src={require('@/assets/img/back.png')} alt="" />
                                                    <div>返回</div>
                                                </div>
                                            </div>

                                            <div className={`${style.mid}`}>
                                                <div className={`flex-stretch ${style.cont}`}>
                                                    <div className={`flex`}>
                                                        {pro.detailMaps ? <>
                                                            <div className={style.big}>
                                                                <img src={prefix + pro.detailMaps[sindex]?.url} alt="" />
                                                            </div>
                                                            <ul>
                                                                {
                                                                    pro.detailMaps.map((item: obj, i: number) => {
                                                                        return <li key={i} onClick={() => setSindex(i)}>
                                                                            <img src={prefix + item.url} />
                                                                        </li>
                                                                    })
                                                                }
                                                            </ul></>
                                                            : null
                                                        }
                                                    </div>

                                                    <div className={style.info}>
                                                        <div className={style.h2}>{pro.model}</div>
                                                        <div className={style.h3}>{pro.title}</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className={style.bot}>
                                                <div className={style.tabs}>
                                                    <ul className='flex'>
                                                        {
                                                            texts.map((item, i) => {
                                                                return <li className={tindex == i ? style.on : ''} onClick={() => setTindex(i)} key={i}>{item}</li>
                                                            })
                                                        }
                                                    </ul>
                                                </div>
                                                <div className={style.cont}>
                                                    {
                                                        tindex == 0 ? <div dangerouslySetInnerHTML={{ __html: pro.content }}></div>
                                                            : tindex == 1 ? <div dangerouslySetInnerHTML={{ __html: pro.parameter }}></div>
                                                                : tindex == 2 ? pro.dimensionalDrawing?.map((item: obj, i: number) => {
                                                                    return <img src={prefix + item.url} key={i} />
                                                                })
                                                                    : tindex == 3 ? <div>{pro.model}</div>
                                                                        : tindex == 4 ? <div className="flex-start">
                                                                            {pro.videos?.map((item: obj, i: number) => {
                                                                                return <div className={style.video} onClick={showVideo(item.url)} key={i}>
                                                                                    <video src={prefix + item.url} key={i} poster={prefix + item.videoImg} />
                                                                                    <img src={require('@/assets/img/play.png')} alt="" />
                                                                                </div>
                                                                            })}
                                                                        </div>
                                                                            : <div style={{ width: '860px', margin: 'auto' }}>
                                                                                {pro.documents?.map((item: obj, i: number) => {
                                                                                    return <a href={prefix + item.url} key={i} className={style.doc} download={item.title}>
                                                                                        <img src={require('@/assets/img/pdf.png')} alt="" />
                                                                                        <span>{item.title}</span>
                                                                                        <img src={require('@/assets/img/download.png')} alt="" />
                                                                                    </a>
                                                                                })}
                                                                            </div>
                                                    }

                                                </div>
                                            </div>

                                        </> : null
                                    }
                                </div>
                                :
                                <div className={`flex-stretch ${style.dialog}`}>
                                    <ul className={style.aside}>
                                        {
                                            list.map((item, i) => {
                                                return <li key={i} className={`flex-start ${index == item.id ? style.on : ''}`} key={i} onClick={tabs(item.id)}>
                                                    <img src={index == item.id ? require('@/assets/img/circle.png') : require('@/assets/img/circles.png')} alt="" />  {item.title}
                                                </li>
                                            })
                                        }
                                    </ul>
                                    {
                                        step == 0 ?
                                            <ul className={`${style.section} ${style.ul}`}>
                                                {
                                                    items.map((item, i) => {

                                                        return <li className={`flex-stretch ${style.li}`} key={item.id}>
                                                            <div className={style.avatar}>
                                                                <img src={prefix + item.image} alt="" />
                                                            </div>
                                                            <div className={style.info}>
                                                                <div className={style.title}>{item.title}</div>
                                                                <div className={style.desc}>{item.introduction}</div>
                                                                <div className={style.more} onClick={detail(i)}>详细&gt;&gt;</div>
                                                            </div>
                                                        </li>
                                                    })
                                                }
                                            </ul>
                                            : <div className={`${style.section} flex-stretch`}>
                                                <div className={style.left}>
                                                    <div >
                                                        <span className={style.gray}>
                                                            <span onClick={() => setStep(0)}>{
                                                                list.find(item => item.id == index).title
                                                            }</span>
                                            &gt;
                                            </span>

                                                        <span>文章详情</span>
                                                    </div>
                                                    <div className={style.detail}>
                                                        <div className={style.h3}>{items[sub].title}</div>
                                                        <div className={style.cont} dangerouslySetInnerHTML={{ __html: items[sub].content }}></div>
                                                    </div>
                                                </div>
                                                <div className={style.right}>
                                                    <div className={`flex-center ${style.pro}`}>
                                                        <img src={require('@/assets/img/fire.png')} alt="" />  推荐产品
                                        </div>
                                                    <ul>
                                                        {items[sub].products.map((item: obj, i: number) => {
                                                            return <li onClick={change(item.productId)} key={i}>
                                                                <div className="flex-center">
                                                                    <img src={prefix + item.image} alt="" />
                                                                </div>
                                                                <div className={style.h3}>
                                                                    <div className={style.mod}>{item.model}</div>
                                                                    <div className={style.tit}>{item.title}</div>
                                                                </div>
                                                            </li>
                                                        })}
                                                    </ul>
                                                </div>
                                            </div>
                                    }

                                </div>
                    }
                </div>
                : null
        }
    </>
}



export default detailPage
